<!-- largePayment 大额支付-->
<template>
  <div class="main largePayment administrativeAssets-container">
    <div class="table-name">
      <div class="table-name-content"><span class="table-name-text">大额支付签呈</span></div>
    </div>
    <swiper :options="swiperOption" ref="mySwiper" @slideChangeTransitionStart="swiperChangeFunc($refs['mySwiper'])">
      <swiper-slide :class="{'swiper-no-swiping': $store.state.overHidden}">
        <div class="form-container">
          <dl class="form-card">
            <dt class="step-content">第一步：业务项目申报</dt>
            <dd class="form-list">
              <first-input-box h-kind="1" :h-check="subCheck" v-model="t_financeproinst.ACCEPT_NAME" h-placeholder="业务名称"></first-input-box>
            </dd>
            <dd class="form-list">
              <second-input-box name="申请人员" :content="t_financeproinst.STAFF_NAME"></second-input-box>
            </dd>
            <dd class="form-list">
              <second-input-box name="申请时间" :content="t_financeproinst.FINANCEPROINST_CREATEDATE"></second-input-box>
            </dd>
            <dd class="form-list">
              <first-input-box v-model="t_financeproinst.FINANCEPROINST_DESC" h-placeholder="备注说明"></first-input-box>
            </dd>
          </dl>
          <!-- <div class="banner-show">
            <img src="../../../assets/img/banner-01.jpg" alt="">
          </div> -->
          <input type="text" style="position:fixed;top:-100rem;left:-100rem;z-index:-1" @focus="$event.currentTarget.blur()">
        </div>
      </swiper-slide>
      <swiper-slide :class="{'swiper-no-swiping': $store.state.overHidden}">
        <div class="form-container">
          <dl class="form-card">
            <dt class="step-content">第二步：填写签呈详情</dt>
            <dd class="form-list">
              <first-input-box h-kind="1" :h-check="subCheck" v-model="t_fundapply.DEPARTMENT_NAME" h-placeholder="申请部门"></first-input-box>
            </dd>
            <dd class="form-list">
              <fourth-input-box h-kind="1" :h-check="subCheck" :h-value="t_fundapply.FUNDAPPLY_CREATEDATE" h-date="date" h-placeholder="申请日期" @changeInput="(time)=>{
          t_fundapply.FUNDAPPLY_CREATEDATE = time
          }"></fourth-input-box>
            </dd>
            <dd class="form-list">
              <first-input-box h-kind="1" :h-check="subCheck" v-model="t_fundapply.APPLY_EXPLAIN" h-placeholder="申请事由"></first-input-box>
            </dd>
            <dd class="form-list">
              <first-input-box h-kind="2" :h-check="subCheck" v-model="t_fundapply.PAYMENT_LOWER" h-placeholder="金额" h-type="number"></first-input-box>
            </dd>
          </dl>
          <input type="text" style="position:fixed;top:-100rem;left:-100rem;z-index:-1" @focus="$event.currentTarget.blur()">
        </div>
      </swiper-slide>
      <swiper-slide :class="{'swiper-no-swiping': $store.state.overHidden}">
        <div class="form-container">
          <div class="form-card">
            <div class="step-content">第四步：上传相关附件</div>
            <div class="form-list">
              <second-input-box :content="t_fundapply.PAYMENT_CAP" name="大写金额"></second-input-box>
              <upload-file @imgArr="imgArr" :http-img-arr="ImageBase64Arr"></upload-file>
            </div>
          </div>
          <div class="form-submit">
            <div class="btn-container" v-if="chose_btn">
              <button class="btn" @click="sumitFunc('1000')">保存</button>
            </div>
            <div class="btn-container-column" v-if="!chose_btn">
              <button class="btn" @click="sumitFunc('1000')">保存</button>
              <button class="btn" @click="sumitFunc('9999')">删除</button>
              <button class="btn" @click="submitPoput(true)">提交</button>
            </div>
          </div>
          <!-- <div class="banner-show">
            <img src="../../../assets/img/banner-02.jpg" alt="">
          </div> -->
        </div>
      </swiper-slide>
      <!-- <div class="swiper-pagination" :style="{'z-index': $store.state.zIndex}" slot="pagination"></div> -->
    </swiper>
    <ol class="pagination-container" :style="{'z-index': $store.state.zIndex}">
      <li class="pagination-dot" v-for="(item, index) in isTrue" :key="index">
        <span class="pagination-num" @click="slideToFunc(index)" :class="{'pagination-num-active':activeIndex>=index}">{{index+1}}</span>
        <span class="pagination-progress" :class="{'pagination-progress-active':activeIndex>=index}" v-if="isTrue.length-1 >index"></span>
        <div class="pagination-finished" v-show="item">
          <img src="../../../assets/img/icon-02.png"/>
        </div>
      </li>
    </ol>
    <div class="chose-popup" v-if="submit_popup">
      <chose-alert @closeShade="submitPoput(false)" :type="1" @submitForm="submitForm" :info="{FINANCEPROINST_ID: FINANCEPROINST_ID, OPERATION_TYPE: OPERATION_TYPE}"></chose-alert>
    </div>
  </div>
</template>

<script>
import firstInputBox from '../../assembly/firstInputBox'
import secondInputBox from '../../assembly/secondInputBox'
import thirdInputBox from '../../assembly/thirdInputBox'
import fourthInputBox from '../../assembly/fourthInputBox'
import uploadFile from '../../assembly/uploadFile'
import choseAlert from '../../mode/choseAlert'
import myClass from '@/assets/js/common'
import { Toast, Indicator } from 'mint-ui'
export default {
  name: 'largePayment',

  data () {
    return {
      swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          renderBullet: function (index, className) {
            return `<div class="${className}">
            <span class="bar-pagination"></span>
            <span class="financial-reimbursement-wancheng1 financial-reimbursement-iconfont finish-tick"></span>
            <span class="step-text">${index === 0 ? '① 填写业务名称': index === 1 ? '② 填写业务基本信息' : '③ 提交审核意见'}</span>
            </div>`
          }
        },
        noSwipin: true // true 不能拖动轮播配合类swiper-no-swiping
        // slidesPerView: 'auto', // 可以自适应
        // centeredSlides: true, // 轮播图居中
        // spaceBetween: 5, // 空5
        // slideToClickedSlide: true // 点击slide可以轮播
      }, // 轮播配置
      activeIndex: 0, // 当前轮播位置
      swpierPosition: [false, false, false], // 轮播图的长度及完成的swiper

      submit_popup: false, // 提交 转交展示 false隐藏
      chose_btn: true, // 提交显示
      subCheck: 0,
      FINANCEPROINST_ID: '', // 项目内码
      OPERATION_TYPE: '', // 业务类型 同ACCEPT_TYPE
      ImageBase64:'', // 附件图片
      ImageBase64Arr: [], // base64图片
      NOWACTDEF_IDS: '', // 当前环节内码
      t_financeproinst: {
        FINANCEPROINST_ID: '', // 项目内码
        STAFF_NAME: '', // 申请人员
        PRODEF_ID: '', // 流程内码
        ACCEPT_TYPE: '', // 业务类型
        ACCEPT_NAME: '', // 业务名称
        FINANCEPROINST_NEXTID: '', // 业务状态
        FINANCEPROINST_DESC: '', // 备注
        FINANCEPROINST_CREATEDATE: '' // 时间
      },
      t_fundapply: {
        FUNDAPPLY_ID: '', // 内码
        FINANCEPROINST_ID: '', // 项目内码
        APPLY_EXPLAIN: '', // 申请事由
        RECIPIENT_BANK: '', // 收款银行
        RECIPIENT_ACCOUNT: '', // 收款账号
        PAY_BANK: '', // 付款银行
        PAY_ACCOUNT: '', // 付款账号
        FUND_INFO: '', // 款项内容
        DEPARTMENT_NAME: '', // 部门名称
        PAYEE_DEPARTMENT: '', // 收款单位
        PAYEE_PERSON: '', // 领款人
        PAYEE_DATE: '', // 领款日期
        PAYEE_USE: '', // 领款用途
        PAYMENT_CAP: '', // 付款金额（大写）
        PAYMENT_LOWER: '', // 付款金额（小写）
        FUNDAPPLY_CREATEDATE: myClass.computedDateTime().split(' ')[0], // 创建时间
        FUNDAPPLY_DESC: '' // 备注
      }
    }
  },
  computed: {
    isEmpty () {
      let [T_F, T_S] = [this.t_financeproinst, this.t_fundapply]
      if (T_F.ACCEPT_NAME === '') {
        return '业务名称不能为空'
      }
      if (T_S.DEPARTMENT_NAME === '') {
        return '申请部门不能为空'
      }
      if (T_S.APPLY_EXPLAIN === '') {
        return '申请事由不能为空'
      }
      if (!myClass.provingFloatTwo(T_S.PAYMENT_LOWER)) {
        return '金额格式不正确'
      }
      if (this.ImageBase64 === '') {
        return '附件不能为空'
      }
      return ''
    },
    isFirst () {
      let [T_F, T_S] = [this.t_financeproinst, this.t_fundapply]
      if (T_F.ACCEPT_NAME === '' || T_F.FINANCEPROINST_DESC === '') {
        return false
      }
      return true
    },
    isSecond () {
      let [T_F, T_S] = [this.t_financeproinst, this.t_fundapply]
      if (T_S.DEPARTMENT_NAME === '' ||
      T_S.APPLY_EXPLAIN === '' ||
      !myClass.provingFloatTwo(T_S.PAYMENT_LOWER)
      ) {
        return false
      }
      return true
    },
    isThird () {
      if (this.ImageBase64 === '') {
        return false
      }
      return true
    },
    isTrue () {
      let [T_F, T_S] = [this.t_financeproinst, this.t_fundapply]
      if (T_F.ACCEPT_NAME === '') {
        this.swpierPosition[0] = false
      } else {
        this.swpierPosition[0] = true
      }
      if (T_S.DEPARTMENT_NAME === '' ||
      T_S.APPLY_EXPLAIN === '' ||
      !myClass.provingFloatTwo(T_S.PAYMENT_LOWER)
      ) {
        this.swpierPosition[1] = false
      } else {
        this.swpierPosition[1] = true
      }
      if (this.ImageBase64 === '') {
        this.swpierPosition[2] = false
      } else {
        this.swpierPosition[2] = true
      }
      return this.swpierPosition
    },
    // 人民币小写
    lowerFourth () {
     return this.t_fundapply.PAYMENT_LOWER
    },
  },
  watch: {
    lowerFourth (afterData, beforeData) {
      this.t_fundapply.PAYMENT_CAP = myClass.convertCurrency(afterData)
    }
  },
  components: {
    firstInputBox,
    secondInputBox,
    thirdInputBox,
    fourthInputBox,
    uploadFile,
    choseAlert
  },

  methods: {
    // 滚动到某个块
    slideToFunc (index) {
      this.$refs['mySwiper'].swiper.slideTo(index, 1000, false)
      this.activeIndex = index
    },
    // 轮播结束时候触发
    swiperChangeFunc (e) {
      this.activeIndex = e.swiper.activeIndex
    },
    submitPoput (boo) {
      if(boo) {
      this.$store.commit('mutateChangeZIndex',{overHidden: true, zIndex: -1})
      } else {
        this.$store.commit('mutateChangeZIndex',{overHidden: false, zIndex: 10})
      }
      this.submit_popup = boo
    },
    // 添加修改附件图片
    imgArr (obj) {
      this.ImageBase64 = obj
    },
    // 提交审批
    submitForm (obj) {
      if (obj.next.ActDef_ID === undefined || obj.trans.USER_ID === undefined) {
        Toast('业务转出或指定经办人未选')
        return
      }
      // 保存
      if (this.isEmpty !== '') {
        this.subCheck++
        Toast(this.isEmpty)
        return
      }
      Indicator.open({
        text: '数据保存修改中……',
        spinnerType: 'fading-circle'
      })
      this.t_financeproinst.FINANCEPROINST_NEXTID = '1000'
      this.$api.post(this.$apiPath.baseURL, this.$apiPath.url,{
        FINANCEPROINST_ID: this.FINANCEPROINST_ID,
        action_type: 'SubmitFinaceInfo',
        action_data: this.$store.state.openid,
        OPERATION_TYPE: this.OPERATION_TYPE, // 业务类型
        FINANCEPROINST_NEXTID: this.t_financeproinst.FINANCEPROINST_NEXTID, // 业务状态
        ImageBase64: this.ImageBase64, // 附件图片
        t_financeproinst: JSON.stringify([this.t_financeproinst]),
        t_fundapply: JSON.stringify([this.t_fundapply])
      }).then(res => {
        Indicator.close()
        if (res.data.ResultObject !== undefined && res.data.ResultObject.length > 0) {
          let resultObject = res.data.ResultObject[0]
          if (resultObject.ResultCode === '100') {
            // Toast({
            //   message: resultObject.ResultDesc,
            //   iconClass: 'icon icon-success'
            // })
            // 流程内码
            this.NOWACTDEF_IDS = resultObject.FourthParameter
            this.FINANCEPROINST_ID = resultObject.FirstParameter
            // 赋值给地址栏 防止刷新数据丢失
            this.t_financeproinst.FINANCEPROINST_ID = resultObject.FirstParameter
            this.FINANCEPROINST_NEXTID = resultObject.FirstParameter
            let query = this.t_financeproinst
            query.ACCEPT_TYPE = resultObject.SecondParameter
            query.OPERATION_TYPE = resultObject.SecondParameter
              this.getDataFunc(resultObject.FirstParameter, resultObject.SecondParameter, resultObject.ThirdParamete, true)
              this.chose_btn = false

            // 提交审批
            Indicator.open({
              text: '数据提交中……',
              spinnerType: 'fading-circle'
            })
            this.$api.post(this.$apiPath.baseURL, this.$apiPath.url, {
              action_type: 'SubmitFinaceInfo',
              action_data: this.$store.state.openid, // openid
              FINANCEPROINST_ID: this.FINANCEPROINST_ID, // 项目内码
              OPERATION_TYPE: this.OPERATION_TYPE, // 业务类型
              FINANCEPROINST_NEXTID: 2000, // 业务状态
              APPROVED_INFO: '', // 意见内容
              NextACTDEF_IDS: obj.next.ActDef_ID, // 转出环节内码
              NextSTAFF_ID: obj.trans.USER_ID, // 人员内码
              NOWACTDEF_IDS: this.NOWACTDEF_IDS // 当前环节内码
            }).then(res => {
              Indicator.close()
              if(res.data.ResultObject && res.data.ResultObject.length > 0) {
                if (res.data.ResultObject[0].ResultCode === '100') {
                  Toast(res.data.ResultObject[0].ResultDesc)
                  setTimeout(() => {
                       this.$store.commit('mutateChangeZIndex',{overHidden: false, zIndex: 10})
                    this.$router.push('/Homepage/expenses')
                  }, 2000);
                } else {
                  Toast(res.data.ResultObject[0].ResultDesc)
                }
              }
            }).catch(err => {
              Indicator.close()
              Toast({
              message: `largePayment提交审批接口出问题了，${err}`,
              iconClass: 'icon icon-success'
            })
            })
          }
          else {
            Toast({
              message: resultObject.ResultDesc,
              iconClass: 'icon icon-success'
            })
          }
        }
      }).catch(err => {
            Indicator.close()
            Toast({
              message: `largePayment保存接口出问题了，${err}`,
              iconClass: 'icon icon-success'
            })
      })

      
    },
    // 获取数据详情（用来修改保存的数据）
    getDataFunc (FINANCEPROINST_ID, OPERATION_TYPE, FINANCEPROINST_NEXTID, loading) {
      if(loading === undefined) {
        Indicator.open({
          text: '数据加载中……',
          spinnerType: 'fading-circle'
        })
      }
      this.$api.post(this.$apiPath.baseURL, this.$apiPath.url, {
        action_type: 'GetExpenseDetail',
        FINANCEPROINST_ID, // 项目内码
        OPERATION_TYPE, // 业务类型
        action_data: this.$store.state.openid, // openid
        FINANCEPROINST_NEXTID // 业务状态
      }).then(res => {
        Indicator.close()
        // 表格数据
        if (res.data.ExpenseBill && res.data.ExpenseBill.length > 0) {
          this.t_fundapply = res.data.ExpenseBill[0]
          this.t_fundapply.FUNDAPPLY_CREATEDATE = this.t_fundapply.FUNDAPPLY_CREATEDATE.split(' ')[0]
        }
        // 图片数据
        if (!loading && res.data.ImageList && res.data.ImageList.length > 0) {
          let arr = res.data.ImageList.map(v => {
            return v.IMAGE_URL.replace(/-/g,'/')
          })
          this.ImageBase64Arr = []
          arr.forEach(v => {
            myClass.getBase64(v).then(res => {
              this.ImageBase64Arr.push(res)
            })
          })
        }
        // 其它
        if (res.data.FinanceProinstList && res.data.FinanceProinstList.length > 0) {
          this.NOWACTDEF_IDS = res.data.FinanceProinstList[0].NOWACTDEF_IDS
        }
      })
    },
    /**
     * 保存 修改 删除 
     * @param state 状态 1000 保存修改 9999 删除 
     */
    sumitFunc (state) {
      if (state === '1000' && this.isEmpty !== '') {
        this.subCheck++
        Toast(this.isEmpty)
        return
      }
      Indicator.open({
        text: state === '1000' ? '数据保存修改中……' : '数据删除中',
        spinnerType: 'fading-circle'
      })
      this.t_financeproinst.FINANCEPROINST_NEXTID = state
      this.$api.post(this.$apiPath.baseURL, this.$apiPath.url,{
        FINANCEPROINST_ID: this.FINANCEPROINST_ID,
        action_type: 'SubmitFinaceInfo',
        action_data: this.$store.state.openid,
        OPERATION_TYPE: this.OPERATION_TYPE, // 业务类型
        FINANCEPROINST_NEXTID: this.t_financeproinst.FINANCEPROINST_NEXTID, // 业务状态
        ImageBase64: this.ImageBase64, // 附件图片
        t_financeproinst: JSON.stringify([this.t_financeproinst]),
        t_fundapply: JSON.stringify([this.t_fundapply])
      }).then(res => {
        Indicator.close()
        if (res.data.ResultObject !== undefined && res.data.ResultObject.length > 0) {
          let resultObject = res.data.ResultObject[0]
          if (resultObject.ResultCode === '100') {
            Toast({
              message: resultObject.ResultDesc,
              iconClass: 'icon icon-success'
            })
            // 流程内码
            this.NOWACTDEF_IDS = resultObject.FourthParameter
            this.FINANCEPROINST_ID = resultObject.FirstParameter
            // 赋值给地址栏 防止刷新数据丢失
            this.t_financeproinst.FINANCEPROINST_ID = resultObject.FirstParameter
            this.FINANCEPROINST_NEXTID = resultObject.FirstParameter
            let query = this.t_financeproinst
            query.ACCEPT_TYPE = resultObject.SecondParameter
            query.OPERATION_TYPE = resultObject.SecondParameter
            // 删除完之后  跳转到报销审核列表
            if (state.toString() === '9999') {
              setTimeout(() => {
                this.$router.push('/Homepage/expenses')
              }, 2000)
            } else if (state.toString() === '1000') {
              // 保存或者修改之后地址栏赋值
             // this.$router.push({path: '/tableParent/bookTransfer', query})
              this.getDataFunc(resultObject.FirstParameter, resultObject.SecondParameter, resultObject.ThirdParamete, true)
              this.chose_btn = false
            }
          }
          else {
            Toast({
              message: resultObject.ResultDesc,
              iconClass: 'icon icon-success'
            })
          }
        }
      })
    },
    // 监听失去焦点当前模块是否填充完整
    blurSlideToFunc () {
      this.activeSwpier = true
      if (this.activeIndex === 0 && this.isFirst) {
          this.$refs['mySwiper'].swiper.slideTo(1, 500, false)
          this.activeIndex = 1
      }
      if (this.activeIndex === 1 && this.isSecond) {
          this.$refs['mySwiper'].swiper.slideTo(2, 500, false)
          this.activeIndex = 2
      }
    },
  },
  created () {
    if (this.$store.state.useName !== undefined) {
      this.t_financeproinst.STAFF_NAME = this.$store.state.useName
    }
    let query = this.$route.query
    let [FINANCEPROINST_ID, OPERATION_TYPE, FINANCEPROINST_NEXTID, PRODEF_ID, ACCEPT_TYPE, ACCEPT_NAME, FINANCEPROINST_DESC, FINANCEPROINST_CREATEDATE] = [
          query['FINANCEPROINST_ID'], // 项目内码
          query['OPERATION_TYPE'], // 业务类型
          query['FINANCEPROINST_NEXTID'], // 业务状态
          query['PRODEF_ID'], // 流程内码
          query['ACCEPT_TYPE'], // 业务类型
          query['ACCEPT_NAME'], // 业务名称
          query['FINANCEPROINST_DESC'], // 备注
          query['FINANCEPROINST_CREATEDATE'] // 时间
        ]
    if (FINANCEPROINST_ID && OPERATION_TYPE && FINANCEPROINST_NEXTID) {
      this.chose_btn = false
      this.t_financeproinst.FINANCEPROINST_ID = FINANCEPROINST_ID
      this.FINANCEPROINST_ID = FINANCEPROINST_ID
      this.OPERATION_TYPE = OPERATION_TYPE
      this.t_financeproinst.FINANCEPROINST_NEXTID = FINANCEPROINST_NEXTID
      this.getDataFunc(FINANCEPROINST_ID, OPERATION_TYPE, FINANCEPROINST_NEXTID)
      
    }
    let STAFF_NAME = this.t_financeproinst.STAFF_NAME
    if (PRODEF_ID && ACCEPT_TYPE && FINANCEPROINST_NEXTID && OPERATION_TYPE) {
      this.OPERATION_TYPE = OPERATION_TYPE
      this.t_financeproinst = {
        FINANCEPROINST_ID: FINANCEPROINST_ID || '', // 业务内码
        PRODEF_ID, // 流程内码
        ACCEPT_TYPE, // 业务类型
        STAFF_NAME, // 申请人员
        ACCEPT_NAME: ACCEPT_NAME || '', // 业务名称
        FINANCEPROINST_NEXTID, // 业务状态
        FINANCEPROINST_DESC: FINANCEPROINST_DESC || '', // 备注
        FINANCEPROINST_CREATEDATE: FINANCEPROINST_CREATEDATE || myClass.computedDateTime() // 时间
      }
    }
  },
  mounted () {
    let dom = document.querySelector('.largePayment')
   let domChildrenInput = dom.querySelectorAll('input')
  //  let domChildrenTextarea = dom.querySelectorAll('textarea')
  for (let i = 0; i < domChildrenInput.length; ++i) {
    domChildrenInput[i].onblur = this.blurSlideToFunc.bind(this)
    // domChildrenInput[i].onfocus = this.focusSlideToFunc.bind(this)
  }
  }
}
</script>
<style lang="stylus" scoped>
$rem = 2.5
.main
  .form-container
    .statistics
      width 100%
    .add
      width 100%
      height 0.8rem * $rem
      font-size 0.56rem * $rem
      line-height 0.8rem * $rem
      text-align center
      &:active
        background-color #dddddd
</style>


